<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8" />
    <title>注册</title>
    <link rel="stylesheet" href="/statics/css/reg.css">
    <script src="/statics/js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>

<body>

<div id="reg">
    <div class="logo_box">
        <h3>
            <img src="/statics/images/tx.png" class="imguser">
            <br>
            用户注册
        </h3>
        <form id="loginForm" method="post" action="">
            <div class="input_outer"> <span class="u_user"></span>
                <input class="text" type="text" placeholder="账号" autocomplete="off">
            </div>
            <div class="input_outer"> <span class="u_user"></span>
                <input class="text" type="text" placeholder="昵称" autocomplete="off">
            </div>
            <div class="input_outer"> <span class="us_eamil"></span>
                <input class="text" placeholder="邮箱" type="email" autocomplete="off">
            </div>

            <div class="input_outer"> <span class="us_pwd"></span>
                <input class="text" placeholder="请输入密码" type="password" autocomplete="off">
            </div>
            <div class="input_outer"> <span class="us_pwd2"></span>
                <input class="text" placeholder="确认密码" type="password" autocomplete="off">
            </div>

            <!-- 新增验证码输入框 -->
            <div class="input_outer"> <span class="us_code"></span>
                <input class="text" placeholder="请输入验证码" type="text" autocomplete="off" id="captcha">
                <button type="button" id="getCaptchaBtn">获取验证码</button>
            </div>

            <div>
                <input type="Submit" class="mb2_submit" value="立 即 注 册">
            </div>
            <a href="/login">已有账号？点击登录</a>
        </form>
    </div>
</div>
</body>

<script>
    $(document).ready(function () {
        // 获取验证码按钮点击事件
        $('#getCaptchaBtn').on('click', function () {
            const email = $('input[placeholder="邮箱"]').val().trim();
            if (email && validateEmail(email)) {
                // 请求后端发送验证码
                fetch('/getCode?email=' + email)
                    .then(response => response.json())
                    .then(data => {
                        if (data.code === 200) {
                            alert("验证码已发送，请查收邮箱");
                        } else {
                            alert(data.message);
                        }
                    })
                    .catch(error => {
                        alert("验证码发送失败，请稍后再试");
                    });
            } else {
                alert("请输入有效的邮箱地址");
            }
        });

        $('#loginForm').on('submit', function (event) {
            event.preventDefault(); // 阻止表单的默认提交行为
            const userid = $('input[placeholder="账号"]').val().trim();
            const nickname = $('input[placeholder="昵称"]').val().trim();
            const email = $('input[placeholder="邮箱"]').val().trim();
            const password = $('input[placeholder="请输入密码"]').val();
            const confirmPassword = $('input[placeholder="确认密码"]').val();
            const userCaptcha = $('#captcha').val().trim();

            if (userid.length < 3) {
                alert('用户名至少需要3个字符');
                return;
            }

            if (!validateEmail(email)) {
                alert('请输入有效的邮箱地址');
                return;
            }

            if (password.length < 6) {
                alert('密码至少需要6个字符');
                return;
            }

            if (password !== confirmPassword) {
                alert('两次输入的密码不一致');
                return;
            }

            if (!userCaptcha) {
                alert('请输入验证码');
                return;
            }

            const userData = {
                account: userid,
                email: email,
                nickname: nickname,
                password: password,
                captcha: userCaptcha // 提交验证码
            };

            fetch('/LoginReg', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(userData)
            })
                .then(response => response.json())
                .then(data => {
                    if (data.code === 200) {
                        alert("注册成功");
                        window.location.href = '/login';
                    } else {
                        alert(data.message);
                    }
                })
                .catch(error => {
                    alert("发生了一个错误，请重试");
                });
        });

        function validateEmail(email) {
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            return emailRegex.test(email);
        }
    });
</script>

</html>
